<section ion-list *ngIf="question.text || question.text === ''">
    <!-- Question text first. -->
    <ion-item text-wrap>
        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
        <span *ngIf="question.prompt">{{ question.prompt }}</span>
    </ion-item>

    <!-- Checkbox for multiple choice. -->
    <ng-container *ngIf="question.multi">
        <ion-item text-wrap *ngFor="let option of question.options">
            <ion-label [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'>
                <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
                <div *ngIf="option.feedback" class="specificfeedback"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></div>
            </ion-label>
            <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled" item-end [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'></ion-checkbox>
            <core-icon item-content *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fa-check" color="success"></core-icon>
            <core-icon item-content *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fa-remove" color="danger"></core-icon>

            <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
            <input item-content type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
        </ion-item>
    </ng-container>

    <!-- Radio buttons for single choice. -->
    <div *ngIf="!question.multi" radio-group [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
        <ion-item text-wrap *ngFor="let option of question.options">
            <ion-label>
                <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text>
                <div *ngIf="option.feedback" class="specificfeedback"><core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"></core-format-text></div>
            </ion-label>
            <ion-radio [value]="option.value" [disabled]="option.disabled" [color]='(option.isCorrect === 1 ? "success": "") +  (option.isCorrect === 0 ? "danger": "")'></ion-radio>
            <core-icon item-content *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fa-check" color="success"></core-icon>
            <core-icon item-content *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fa-remove" color="danger"></core-icon>
        </ion-item>
        <div *ngIf="!question.disabled" padding-horizontal>
            <button text-wrap [disabled]="!question.singleChoiceModel" ion-button full color="light" (click)="clear()" type="reset">{{ 'addon.mod_quiz.clearchoice' | translate }}</button>
        </div>

        <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
        <input type="hidden" [ngModel]="question.singleChoiceModel" [attr.name]="question.optionsName">
    </div>
</section>
